;(function () {
	// 步骤3：创建echarts实例
	let myChart = echarts.init(document.querySelector('.box:nth-of-type(1)'))

	// 步骤4：定义配置（指定图表的配置项和数据）
	let option = {
		xAxis: {
			// type: 'category',
			// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			show: false
		},
		yAxis: {
			// type: 'value'
			type: 'category',
			data: ['字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称', '字段名称'],
			// 坐标轴刻度标签的：颜色#9a9fb4、字体14px
			axisLabel: {
				color: '#9a9fb4',
				fontSize: '14'
			},
			// 坐标轴轴线：隐藏
			axisLine: {
				show: false
			},
			// 坐标轴刻度：隐藏
			axisTick: {
				show: false
			}
		},
		grid: {
			left: 100,
			bottom: 8
		},
		series: [
			{
				data: [120, 60, 32, 88, 99, 63, 134],
				type: 'bar',
				showBackground: true,
				// backgroundStyle: {
				//  color: 'rgba(180, 180, 180, 0.2)'
				// },

				// 柱状图颜色
				color: '#6abaf2',
				backgroundStyle: {
					// 柱状图背景色
					color: '#1e2a6a'
				},
				// 图形上的文本标签
				label: {
					show: true,
					position: 'outside', // 定位外部
					color: '#65b1e9',
					fontWeight: 'bold',
					formatter: '{c}%'
				}
			}
		]
	}

	// 步骤5：使用刚指定的配置项和数据显示图表
	myChart.setOption(option)

	// window.onresize = () => {
	//     myChart.resize()
	// }

	window.addEventListener('resize', () => {
		myChart.resize()
	})
})()
